<template>
	<view class="report_form_page">
		<u-navbar autoBack fixed placeholder bgColor="#fff">
			<template #left>
				<view class="navBar">
					<u-icon name="arrow-left" color="#000" size="18"></u-icon>
					<text class="nav_title">填报数据</text>
				</view>
			</template>
		</u-navbar>
		<scroll-view scroll-y class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
			<view class="report_date">
				{{reportDate}}
			</view>
      <u-form :model="form" :rules="rules" ref="form">
        <view class="report_item">
          <u-form-item prop="businessAmount" label="当日消费金额：" labelWidth="120">
            <u-input v-if="readonly" type="text" :value="form.businessAmount + '元'" readonly border="none" placeholder="请输入 (元)" />
            <u-input v-else type="text" v-model="form.businessAmount" border="none" placeholder="请输入 (元)" />
          </u-form-item>
        </view>
        <view class="report_item">
          <u-form-item prop="businessPersonTime" label="当日消费人数：" labelWidth="120">
            <u-input v-if="readonly" type="text" :value="form.businessPersonTime + '人次'" readonly border="none" placeholder="请输入 (人次)" />
            <u-input v-else type="text" v-model="form.businessPersonTime" border="none" placeholder="请输入 (人次)" />
          </u-form-item>
        </view>
      </u-form>
			<block>
				<view class="bottom_btn_submit" v-if="!readonly" @click="submit">提交</view>
				<view class="bottom_btn_update" v-else @click="readonly = false">修改</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
import {qiyeReportDetail, qiyeReportSubmit} from "@/api/shop";

  export default {
    onLoad(option) {
      this.reportId = option.id
      this.reportDate = option.date
      this.getReportDetail()
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
		data() {
			return {
        reportId: '',
        reportDate: '',
				form: {
          businessAmount: '',
          businessPersonTime: ''
        },
        rules: {
          businessAmount: {
            type: 'float',
            required: true,
            message: '请输入当日消费金额',
            trigger: ['change','blur'],
          },
          businessPersonTime: {
            type: 'integer',
            required: true,
            message: '请输入当日消费人数',
            trigger: ['change','blur'],
          }
        },
        readonly: true
			}
		},
		computed: {
			navBarHeight() {
				const platform = uni.getSystemInfoSync().platform
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				let navHeight = 0
				if (['ios', 'devtools'].includes(platform)) {
					navHeight = 44
				} else {
					navHeight = 48
				}
				return navHeight + statusBarHeight
			}
		},
		methods: {
      async getReportDetail() {
        const { code, data } = await qiyeReportDetail(this.reportId)
        if (code === 200) {
          this.form = {
            businessAmount: data.businessAmount || '',
            businessPersonTime: data.businessPersonTime || ''
          }
          this.readonly = data.type === '1'
        }
      },
			submit() {
        this.$refs.form.validate().then(() => {
          qiyeReportSubmit({
            businessAmount: this.form.businessAmount,
            businessPersonTime: this.form.businessPersonTime,
            id: this.reportId
          }).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess('提交成功')
              this.readonly = true
            }
          })
        }).catch(errors => {
          console.warn('errors', errors)
          this.$modal.msgError(errors[0].message)
        })

			}
		}
	}
</script>

<style lang="scss" scoped>
	.report_form_page {
		width: 100vw;
		height: 100vh;
		background-color: #F3F3F3;

		.navBar {
			display: flex;
			align-items: center;

			.nav_title {
				font-size: 36rpx;
				font-weight: 400;
				color: #000000;
				margin-left: 8rpx;
			}
		}

		.content {
			box-sizing: border-box;
			padding: 16rpx;
			display: flex;
			flex-direction: column;
			.report_date {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				padding: 44rpx 30rpx;
			}
			.report_item {
				display: flex;
				align-items: center;
				justify-content: start;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx 30rpx;
				margin-bottom: 30rpx;
				.label {
					font-size: 36rpx;
					font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
					font-weight: 500;
					color: #333333;
				}
				input::placeholder {
					font-size: 36rpx;
					font-weight: 400;
					color: #999999;
				}
				input, text {
					flex: 1;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
				}
			}
			.bottom_btn_submit {
				margin-top: 60rpx;
				width: 100%;
				background: linear-gradient(288deg, #F0B643 25%, #F1BC0B 100%);
				border-radius: 100rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
			.bottom_btn_update {
				margin-top: 80rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #0A87FC;
			}
		}
	}
</style>
